Jump to content
  • 0

Ровно посерединке

Metus

Asked by Metus,

 Share

Question

Metus Explorer

Metus

Posted
Posted (edited)

Итак, многие из нас делают сайты.

Очень часто вся информация располагается в единственном блоке, позиционированным горизонтально по центру.

Как позиционируется: горизонтальным выравниванием или таблицей из трёх столбцов - неважно.

При этом, на смаом сайте страницы имеют разное по-объёму содержание:

Порой страница вмещается по вертикали без прокрутки, а порой уходит далеко вниз, при этом появляется боковой ползунок прокрутки и наш центральный блок начинает поизиционироваться с учётом уменьшившейся области браузера.

То есть при переходе с "маленькой" страницы на "большую" наш центральный блок "прыгает" влево, что, порой неочень.

И вот мне интересно, есть ли какой-нибудь изящный способ избежать этого?

Edited by Metus
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

я не про то.

Скажу проще.

Можно ли сделать так, чтобы блок остался на том же месте, в том же положении и состоянии для пользователя, если появляется боковая полоса прокрутки?

absolutе тебе в помощь

Хотя можно и margin-ом его отодвинуть сразу от левого края. Короче сделать заранее отступ нужный.

Link to comment
Share on other sites
  • 0
Metus Explorer

Metus

Posted
  • Author
Posted (edited)

а можно чуть-чуть поподробнее?

вот одна страница есть, по вертикали влезает.

вот есть другая и не влезает -> появляется боковая полоса прокрутки -> уменьшается клиентская область -> позиционирование идёт относительно уменьшившейся клиентской области -> весь кусок на мониторе сдвигается влево, что выглядит неочень.

Я, пока, кроме способа Ява-скриптом как-то высчитать ширину полосы прокрутки и поставить ширину правому столбцу таблицы не вижу (то есть позиционируем тремя столбцами, у них ширина: auto; 900px(например); auto; )

а после этого определяем ширину двух крайних столбцов и вычитаем из ширины правого ширину полосы прокрутки

Тогда вопрос: как определить ширину полосы прокрутки?

Added:

Нашёл 1 способ только адекватный.

сразу после <body> определяем его ширину, создаём переменную.

перед <body> снова определяем его ширину.

Если не совпадают, левому столбцу задаём жёстко ширину, которая была для него рассчитана, а правому такую же минус разность значений ширины body.

Edited by Metus
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Тут только вопрос в том, как к этому заказчик отнесётся - может не заметит, а если заметит, то норм, а может наоборот.

И сразу вопрос: как задать неактивную полосу? :o

Не пойдёт?

http://htmlbook.ru/css/overflow-x'>http://htmlbook.ru/css/overflow-x

http://htmlbook.ru/css/overflow-y'>http://htmlbook.ru/css/overflow-y

http://htmlbook.ru/css/overflow

Link to comment
Share on other sites
  • 0
Metus Explorer

Metus

Posted
  • Author
Posted (edited)

если в опереде 9.2 совсем не работает, то, увы не пойдёт (в т.з. всегда опера начиная с 9.0)

но с другой стороны, те кто сидят на ней - обойдутся)) Не велика потеря, в принципе

Спасибо большое! =)

Edited by Metus
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

если в опереде 9.2 совсем не работает, то, увы не пойдёт (в т.з. всегда опера начиная с 9.0)

но с другой стороны, те кто сидят на ней - обойдутся)) Не велика потеря, в принципе

Да, какой ужас. Ведь ещё целых 1.6% :o

http://www.liveinternet.ru/stat/ru/browsers.html?period=month

Link to comment
Share on other sites
  • 0
chaban Explorer

chaban

Posted
Posted

И вот мне интересно, есть ли какой-нибудь изящный способ избежать этого?

Мне помогло это http://www.html.by/threads/18236-Skroll-prygaet-lja-centralnogo-bloka?p=109311#post109311 решение

Но там еще есть некоторые проблемки, которые я пока не решил.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Считать "прыгание" блока влево из-за появления полосы прокрутки - просто тупо. Я бы от такого заказчика держался подальше ибо количество идиотских требований у них, как правило, со временем только увеличивается.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept